import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
import {
  EditableProTable,
  ProCard,
  ProFormField,
  ProFormRadio,
} from '@ant-design/pro-components';
import {
  Button,
  DatePicker,
  Form,
  Input,
  Modal,
  Radio,
  Tag,
  Select,
  InputNumber,
  message,
  Tree
} from 'antd';
import { modalLayoutLg, modalLayoutSm } from '@/config/layout';
import { request } from 'umi';
import { PlusOutlined } from '@ant-design/icons';




const DictModal = (props: any, refs: any) => {
  const [form] = Form.useForm();
  // const [fileList,setfileList] = useState([]);
  const [code, setCode] = useState('');
  const [selectedKeys, setselectedKeys] = useState([]);
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [list, setlist] = useState([]);
  //显示弹窗
  const showModal = () => {
    setIsModalVisible(true);
  };

  //取消
  const handleCancel = () => {
    setIsModalVisible(false);
    setCode('');
    setselectedKeys([]);
    setlist([]);
    props.callback && props.callback();
  };
  //确定
  const handleOk = () => {
    if (selectedKeys.length == 0) {
      message.error('最少选择一个标签')
      return;
    }
    const url = '/api/dataEncyclopedia/apiTag/create';
    request(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        apiId: code,
        tagId: selectedKeys[0],
      },
    }).then((res) => {
      message.success('添加成功');
      setIsModalVisible(false);
      handleCancel();
    });
  };

  const getTree = (id?: any) => {
    request('/api/dataEncyclopedia/tags/list', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      data: {
        pageNum: 1, pageSize: 10000000
      },
    }).then((res) => {
      let data = res?.data || []
      setlist(data);
      showModal();
    });
  };
  useImperativeHandle(refs, () => ({
    init: (id: any) => {
      setCode(id);
      getTree()

      // setfileList([]);
    },
  }));
  return (
    <Modal
      title={'api标签管理'}
      visible={isModalVisible}
      onOk={handleOk}
      onCancel={handleCancel}
      centered
      width={1800}
      maskClosable={false}
      bodyStyle={{
        maxHeight: window.innerHeight - 150,
        overflowY: 'auto',
      }}

    >
      <Tree
        treeData={list}
        fieldNames={{
          title: 'name',
          key: 'id',
        }}
        selectedKeys={selectedKeys}
        onSelect={(keys) => {
          console.log(keys);
          setselectedKeys(keys)
        }}
      />
    </Modal>
  );
};
const AddMCom = forwardRef(DictModal);

export default AddMCom;
